<template>
    <div class="app">
      <div class="top_image">
        <img src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/portal/product_and_services/bannner.jpg" style="width: 100%;height: 100%;display: block">
        <div class="product_line_content"
             :default-active="index"
             @open="handrOpen"
             @close="handrClose">
          <div class="icon_content" @click="toProduct(0)">
            <div class="icon_text_content">
              <span :class="[ index==0?'click_icon':'icon']" class="iconfont">&#xe647;</span>
              <span :class="[index==0?'click_icon':'icon']" >芸订水</span>
            </div>
            <div :class="[index==0?'line':'']" ></div>
          </div>
          <div class="icon_content"  @click="toProduct(1)">
            <div class="icon_text_content">
              <span :class="[ index==1?'click_icon':'icon']" class="iconfont"><i class="el-icon-s-shop"></i></span>
              <span :class="[index==1?'click_icon':'icon']">芸商店</span>
            </div>
            <div :class="[index==1?'line':'']" ></div>

          </div>
          <div class="icon_content"  @click="toProduct(2)">
            <div class="icon_text_content">
              <span :class="[ index==2?'click_icon':'icon']" class="iconfont"><i class="el-icon-thumb"></i></span>
              <span :class="[index==2?'click_icon':'icon']">芸点单</span>
            </div>
            <div :class="[index==2?'line':'']" ></div>

          </div>
          <div class="icon_content"  @click="toProduct(3)">
            <div class="icon_text_content">
              <span :class="[ index==3?'click_icon':'icon']" class="iconfont" ><i class="el-icon-location-outline"></i></span>
              <span :class="[index==3?'click_icon':'icon']">芸车场</span>
            </div>
            <div :class="[index==3?'line':'']" ></div>
          </div>
        </div>
      </div>
      <div class="product_info_content" v-show="index == 0">
      <img src="http://cdnx.rzico.com/portal/yun_water/1.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_water/2.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_water/3.1.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_water/3.2.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_water/3.3.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_water/3.4.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_water/3.5.png" class="yzs">
      </div>
      <div class="product_info_content" v-show="index == 1">
        <img src="http://cdnx.rzico.com/portal/yun_shop/1.1.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_shop/1.2.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_shop/1.3.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_shop/2.1.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_shop/2.2.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_shop/2.3.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_shop/2.4.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_shop/2.5.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_shop/3.png" class="yzs">
        <img src="http://cdnx.rzico.com/portal/yun_shop/4.png" class="yzs">
      </div>
      <div class="product_info_content" v-show="index == 2">
        <img src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/portal/product_and_services/coming_soon.jpg" class="yzs">
      </div>
      <div class="product_info_content" v-show="index == 3">
        <img src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/portal/product_and_services/coming_soon.jpg" class="yzs">
      </div>
      <div class="product_info_bottom" >
          <span class="product_info_text">用技术联结和重构实体产业</span>
          <div class="product_info_item_content">
            <div class="product_info_item">
              <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/serviceLogo1.png" class="info_image">
              <span class="info_text">订单系统</span>
            </div>
            <div class="product_info_item">
              <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/serviceLogo2.png" class="info_image">
              <span class="info_text">配送系统</span>
            </div>
            <div class="product_info_item">
              <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/serviceLogo3.png" class="info_image">
              <span class="info_text">监管系统</span>
            </div>
            <div class="product_info_item">
              <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/serviceLogo4.png" class="info_image">
              <span class="info_text">结算系统</span>
            </div>
            <div class="product_info_item">
              <img src="http://rzico.oss-cn-shenzhen.aliyuncs.com/portal/serviceLogo5.png" class="info_image">
              <span class="info_text">大数据应用</span>
            </div>
          </div>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'product',
    data(){
      return{
        index:0
      }
    },
    props:[
      'productindex'
    ],
    created() {
      console.log(this.productindex)
      this.index = Number(this.productindex)
    },
    methods:{
      toProduct(data){
        this.index=data
      },
      handrOpen(data){
        console.log(data)
      },
      handrClose(){

      },
    }
  }
</script>

<style scoped>

  @media screen and (min-width: 321px) and (max-width: 750px) {
    .app{
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .product_line_content{
      display: flex;
      background-color: white;
      padding-right: 20px;
      flex-wrap: wrap;
      padding-left: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      justify-content: space-around;
      align-items: center;
      bottom: -15px;
      height: 37px;
      border-radius: 5px;
      width: 90%;
      position: absolute;

    }
    .top_image{
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .icon {
      color: #4d4d4d;
      font-size: 10px;
    }
    .click_icon{
      color:  #00B6FB;
      font-size: 10px;
    }
    .icon_content{
      width: 50px;
      display: flex;
      height: 100%;
      justify-content: space-between;
      flex-direction: column;
    }
    .line{
      width: 55px;
      height: 2px;
      background-color: #00B6FB;
    }
    .icon_text_content{
      padding-top: 5px;
      width: 55px;
    }
    .product_info_content{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-top: 30px;
      height: auto;
      padding-bottom: 20px;
      background-color: #fff;
    }
    .yzs {
      width: 100%;
      padding-right: 20px;
      padding-left: 20px;
      padding-top: 30px;
    }
    .product_info_bottom{
      width: 100%;
      flex-wrap: wrap;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .product_info_text{
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;
    }
    .product_info_item_content{
      display: flex;
      margin-top: 20px;
      width: 100%;
      padding-left: 20px;
      padding-right: 20px;
      flex-wrap: wrap;
      margin-bottom: 20px;

      justify-content: space-around;
      align-items: center;
    }
    .product_info_item{
      width:60px ;
      display: flex;
      flex-direction: column;
      /*justify-content: center;*/
      align-items: center;
    }
    .info_image{
      height: 35px;
      width: 35px;
    }
    .info_text{
      font-size: 12px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;

    }
  }
  @media (max-width:320px){
    .app{
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .product_line_content{
      display: flex;
      background-color: white;
      padding-right: 20px;
      flex-wrap: wrap;
      padding-left: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      justify-content: space-around;
      align-items: center;
      bottom: -15px;
      height: 37px;
      border-radius: 5px;
      width: 90%;
      position: absolute;

    }
    .top_image{
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .icon {
      color: #4d4d4d;
      font-size: 10px;
    }
    .click_icon{
      color:  #00B6FB;
      font-size: 10px;
    }
    .icon_content{
      width: 55px;
      display: flex;
      height: 100%;
      justify-content: space-between;
      flex-direction: column;
    }
    .line{
      width: 55px;
      height: 2px;
      background-color: #00B6FB;
    }
    .icon_text_content{
      padding-top: 5px;
      width: 55px;
    }
    .product_info_content{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-top: 20px;
      height: auto;
      background-color: #fff;
      padding-bottom: 20px;
    }
    .yzs{
      width: 100%;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 30px;
    }
    .product_info_bottom{
      width: 100%;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .product_info_text{
      font-size: 10px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;
    }
    .product_info_item_content{
      display: flex;
      margin-top: 20px;
      width: 100% ;
      margin-bottom: 30px;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
    .product_info_item{
      width:60px ;
      display: flex;
      flex-direction: column;
      /*justify-content: center;*/
      align-items: center;
    }
    .info_image{
      height: 35px;
      width: 35px;
    }
    .info_text{
      font-size: 10px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;

    }
  }
  @media screen and (min-width: 751px) and (max-width: 1199px){
    .app{
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .product_line_content{
      display: flex;
      background-color: white;
      padding-right: 25px;
      padding-left: 25px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      justify-content: space-between;
      align-items: center;
      bottom: -30px;
      height:70px;
      border-radius: 5px;
      width: 90%;
      position: absolute;

    }
    .top_image{
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .icon {
      color: #4d4d4d;
      font-size: 22px;
    }
    .click_icon{
      color:  #00B6FB;
      font-size: 22px;
    }
    .icon_content{
      width: 200px;
      display: flex;
      height: 100%;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
    }
    .line{
      width: 90px;
      height: 2px;
      background-color: #00B6FB;
      position: absolute;
      bottom: 0px;
    }
    .icon_text_content{
      padding-top: 30px;
    }
    .product_info_content{
      width: 100%;
      margin-top: 60px;
      height: auto;
      padding-bottom: 20px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .yzs{
      width: 100%;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 30px;
    }
    .product_info_bottom{
      width: 100%;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .product_info_text{
      font-size: 25px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;
    }
    .product_info_item_content{
      display: flex;
      margin-top: 20px;
      width: 100%;
      padding-right: 20px;
      padding-left: 20px;
      margin-bottom: 30px;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
    .product_info_item{
      width: 145px;
      display: flex;
      flex-direction: column;
      /*justify-content: center;*/
      align-items: center;
    }
    .info_image{
      height: 60px;
      width: 60px;
    }
    .info_text{
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;

    }
  }
  @media (min-width: 1200px){
    .app{
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .product_line_content{
      display: flex;
      background-color: white;
      padding-right: 25px;
      padding-left: 25px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      justify-content: space-around;
      align-items: center;
      bottom: -30px;
      height:70px;
      border-radius: 5px;
      width: 600px;
      position: absolute;

    }
    .top_image{
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    .icon {
      color: #4d4d4d;
      font-size: 21px;
    }
    .click_icon{
      color:  #00B6FB;
      font-size: 22px;
    }
    .icon_content{
      width: 200px;
      display: flex;
      height: 100%;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
    }
    .line{
      width: 100px;
      height: 2px;
      background-color: #00B6FB;
    }
    .icon_text_content{
      padding-top: 30px;
    }
    .product_info_content{
      width: 1200px;
      margin-top: 60px;
      height: auto;
      padding-bottom: 20px;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .yzs{
      width: 1000px;
      padding-top: 30px;
    }
    .product_info_bottom{
      width: 1200px;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .product_info_text{
      font-size: 25px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;
    }
    .product_info_item_content{
      display: flex;
      margin-top: 20px;
      width: 1000px;
      margin-bottom: 30px;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
    }
    .product_info_item{
      width:150px ;
      display: flex;
      flex-direction: column;
      /*justify-content: center;*/
      align-items: center;
    }xs
     .info_image{
       height: 80px;
       width: 80px;
     }
    .info_text{
      font-size: 25px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #535353;

    }
  }

</style>
